<template>
    <div class="new">
        <div class="tabs">
            <div
                class="tab"
                :class="{ active: tabIndex == 0 }"
                @click="tabClick(0)"
            >
                我的主页
            </div>
            <div
                class="tab"
                :class="{ active: tabIndex == 1 }"
                @click="tabClick(1)"
            >
                我的关注
            </div>
            <div
                class="tab"
                :class="{ active: tabIndex == 2 }"
                @click="tabClick(2)"
            >
                我的点赞
            </div>
            <div
                class="tab"
                :class="{ active: tabIndex == 3 }"
                @click="tabClick(3)"
            >
                我的评论
            </div>
        </div>
        <div v-show="tabIndex == 0" class="tab1">
            <div v-if="userInfo" class="tab1-user">
                <div class="name">
                    <img :src="userInfo.avatar" alt="" />
                    {{ userInfo.nickname }}
                </div>
                <div class="gz-fs">
                    <div>关注：{{ num1 }}</div>
                    <div>粉丝：{{ num2 }}</div>
                </div>
            </div>

            <commentItem
                v-for="(item, index) in List0"
                :key="index"
                :dataItem="item"
                @changeLike="changeLike"
                @setFollow="setFollow"
            ></commentItem>
        </div>
        <div v-show="tabIndex == 1" class="tab2">
            <div class="title">我的关注</div>
            <div v-for="(item, index) in List1" :key="index" class="gz-user">
                <img :src="item.avatar" alt="" />
                <div class="name">{{ item.nickname }}</div>
                <div class="gz-button" @click="dontFocus(item)">已关注</div>
            </div>
        </div>
        <div v-show="tabIndex == 2" class="tab3">
            <div class="title">我的点赞</div>
            <commentItem
                v-for="(item, index) in List2"
                :key="index"
                :dataItem="item"
                @changeLike="changeLike"
                @setFollow="setFollow"
            ></commentItem>
        </div>
        <div v-show="tabIndex == 3" class="tab3">
            <div class="title">我的评论</div>
            <commentItem
                v-for="(item, index) in List3"
                :key="index"
                :dataItem="item"
                @changeLike="changeLike"
                @setFollow="setFollow"
            ></commentItem>
        </div>
    </div>
</template>

<script>
import commentItem from "@/components/happlypost/commentItem.vue";
import { mapState } from "vuex";
import {
    getMyFollowFans,
    setFollow,
    getMyTopic,
    getMyGiveLikes,
    getMyComments,
} from "@/assets/api/happlypostApi.js";

export default {
    components: {
        commentItem,
    },
    name: "pageindex",
    props: {},
    data() {
        return {
            commentInput: "",
            showInput: true,
            tabIndex: 0,
            List0: [],
            List1: [],
            List2: [],
            List3: [],

            num1: 0,
            num2: 0,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    mounted() {
        this.tabClick(0);

        this.ggg();
    },
    methods: {
        async ggg() {
            const res1 = await getMyFollowFans({
                type: 1,
            });
            if (res1.code == 1) {
                this.num1 = res1.data.focus.length;
                this.num2 = res1.data.fans.length;
            }
        },

        async tabClick(index) {
            this.tabIndex = index;
            if (index == 0) {
                const res = await getMyTopic([]);
                if (res.code == 1) {
                    this.List0 = res.data;
                }
            } else if (index == 1) {
                const res = await getMyFollowFans({
                    type: 1,
                });
                if (res.code == 1) {
                    this.List1 = res.data.focus;
                }
            } else if (index == 2) {
                const res = await getMyGiveLikes([]);
                if (res.code == 1) {
                    this.List2 = res.data;
                }
            } else if (index == 3) {
                const res = await getMyComments({});
                if (res.code == 1) {
                    this.List3 = res.data;
                }
            }
        },

        dontFocus(item) {
            let that = this;
            this.$confirm("确定不再关注此人？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const res = await setFollow({
                        uid: item.uid,
                    });
                    that.tabClick(1);
                })
                .catch(() => {});
        },

        changeLike(dataItem) {
            let dataList = this["List" + this.tabIndex];
            for (let item of dataList) {
                if (item.id == dataItem.id) {
                    if (item.is_like == 1) {
                        item.is_like = 0;
                        item.give_like--;
                    } else {
                        item.is_like = 1;
                        item.give_like++;
                    }
                }
            }
        },

        setFollow(dataItem) {
            let dataList = this["List" + this.tabIndex];
            for (let item of dataList) {
                if (item.id == dataItem.id) {
                    if (item.is_follow == 1) {
                        item.is_follow = 0;
                    } else {
                        item.is_follow = 1;
                    }
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.tabs {
    padding: 35px 20px;
    display: flex;
    align-items: center;
    .tab {
        margin-right: 67px;
        font-weight: 400;
        font-size: 20px;
        color: #333333;
        cursor: pointer;
    }
    .active {
        color: #1b87f2 !important;
    }
}

.tab1 {
    .tab1-user {
        padding: 32px 24px;
        background: #ffffff;
        margin-bottom: 18px;
        .name {
            img {
                width: 58px;
                height: 58px;
                object-fit: cover;
                border-radius: 58px;
                margin-right: 8px;
            }
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
        }
        .gz-fs {
            display: flex;
            align-items: center;
            padding-left: 66px;
            padding-top: 8px;
            div {
                font-weight: 400;
                font-size: 18px;
                color: #333333;
                width: 250px;
            }
        }
    }
}

.tab2 {
    .title {
        height: 60px;
        background-color: #ffffff;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        padding-left: 70px;
        line-height: 60px;
        margin-bottom: 8px;
    }

    .gz-user {
        padding: 14px 24px;
        padding-right: 44px;
        display: flex;
        align-items: center;
        background-color: #ffffff;
        margin-bottom: 18px;
        .name {
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            width: 100%;
            padding-left: 8px;
        }
        img {
            width: 55px;
            height: 55px;
            border-radius: 55px;
            min-width: 55px;
            object-fit: cover;
        }
        .gz-button {
            width: 77px;
            min-width: 77px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            background: #ff9625;
            border-radius: 3px;
            font-weight: 500;
            font-size: 16px;
            color: #ffffff;
            cursor: pointer;
        }
    }
}

.tab3 {
    .title {
        height: 60px;
        background-color: #ffffff;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        padding-left: 70px;
        line-height: 60px;
        margin-bottom: 8px;
    }
}
</style>
